<template>
  <div class="m-import-data">
    <el-button plain @click="showDialog">
      <img src="@/assets/svg/excel.svg" />
      批量导入
    </el-button>

    <el-dialog
      title="导入"
      width="30%"
      v-model="dialogVisible"
      :beforeClose="beforeClose"
      destroy-on-close
    >
      <div class="m-import-data__tip">
        <slot name="tip"> 允许导入的文件格式:xls/xlsx </slot>
      </div>
      <el-select
        v-model="value"
        placeholder="请选择"
        style="margin-bottom: 10px; width: 100%"
        v-if="props.options.length > 0"
      >
        <el-option
          v-for="item in props.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xls,.xlsx"
        :http-request="httpRequest"
        @change="selectFile = true"
        @remove="selectFile = false"
        @beforeSubmit="beforeSubmit"
        :before-upload="beforeUpload"
      >
        <!--<template #trigger>-->
        <!--  <el-button type="primary">浏览</el-button>-->
        <!--</template>-->
        <!--<div class="m-import-data__btn">-->
        <!--  <el-select v-model="value" placeholder="请选择通知模板">-->
        <!--    <el-option-->
        <!--      v-for="item in options"-->
        <!--      :key="item.value"-->
        <!--      :label="item.label"-->
        <!--      :value="item.value"-->
        <!--    />-->
        <!--  </el-select>-->
        <!--  <el-button type="primary" @click="submitUpload"> 开始导入 </el-button>-->
        <!--</div>-->
        <!--<template #tip>-->
        <!--  <div class="m-import-data__res"></div>-->
        <!--</template>-->

        <div class="upload">
          <el-icon size="20" color="#999999"><Plus /></el-icon>
          点击或拖入文件到此区域，上传文件
        </div>
      </el-upload>
      <div class="log" v-if="errorInfo">
        <div class="logTitle">数据导入日志</div>
        <div v-if="showMessage" class="logInfo">
          <div v-for="i in errorInfo" :key="i" class="infoItem">
            <span>{{ i }}</span>
          </div>
        </div>
        <template v-else>
          <div v-for="(i, index) in errorInfo" :key="i" class="infoItem">
            <span>{{ index + 1 }}</span>
            .
            <span>{{ i }}</span>
          </div>
        </template>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="dialogVisible = false" type="primary"
          >确定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import type {
  DialogBeforeCloseFn,
  UploadInstance,
  UploadProps
} from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
import { importDataProps, importDataEmits } from './importData'
import { Plus } from '@element-plus/icons-vue'
defineOptions({
  name: 'MImportData'
})

const props = defineProps(importDataProps)
const emit = defineEmits(importDataEmits)

const selectFile = ref(false)

const dialogVisible = ref(false)
const showDialog = () => {
  dialogVisible.value = true
}

watch(dialogVisible, (val) => {
  if (!val) {
    errorInfo.value = []
    selectFile.value = false
  }
})

const beforeClose: DialogBeforeCloseFn = (done) => {
  done()
}

const value = ref('')
const options: any = [
  // {
  //   value: 'Option1',
  //   label: 'Option1'
  // }
]

const errorInfo: any = ref()

const beforeUpload = (file) => {
  if (props.options.length > 0 && value.value === '') {
    ElMessage.error('请选择！')
    return false
  }
}

const httpRequest: UploadProps['httpRequest'] = (options) => {
  const { file } = options
  // 请求上传接口
  const formdata = new FormData()
  formdata.append('file', file)

  Object.keys(props.params || {}).forEach((i: any) => {
    formdata.append(i, props.params[i])
  })

  if (props.options.length > 0) {
    formdata.append(props.optionLabel, value.value)
  }
  return props
    .http(formdata)
    .then((res: any) => {
      emit('reload')
      if (props.showMessage) {
        // ElMessage.success('导入完成')
        errorInfo.value = res.data
        return
      }

      if (res.msg === '-1') {
        ElMessage.error('导入失败')
        errorInfo.value = res.data
      } else {
        ElMessage.success('导入成功')
        dialogVisible.value = false
      }
    })
    .catch((err) => {
      console.log(err)
      // ElMessage.error('导入失败')
      // errorInfo.value = err.data
    })
}

// 提交
const uploadRef = ref<UploadInstance>()
const submitUpload = () => {
  if (!selectFile.value) {
    return ElMessage.warning('请选择导入的文件')
  }
  uploadRef.value!.submit()
}
</script>

<style lang="scss" scoped>
.m-import-data {
  img {
    margin-right: 5px;
  }

  &__tip {
    font-size: 14px;
    color: #0081ff;
    margin-bottom: 10px;
  }

  &__btn {
    display: inline-flex;
    width: calc(100% - 60px);
    align-items: center;
    .el-select {
      flex: 1;
      margin: 0 10px;
    }
  }

  &__res {
    margin-top: 20px;
  }
}

// :deep(.el-dialog) {
//   .el-dialog__header {
//     margin-right: 0;
//     border-bottom: 1px solid #e5e6eb;
//     padding: 15px 20px;
//   }
//   .el-dialog__footer {
//     border-top: 1px solid #e5e6eb;
//     padding: 15px 20px;
//   }
// }

.log {
  // width: 478px;
  width: 100%;
  font-size: 16px;
  .logTitle {
    width: 100%;
    text-align: center;
    padding: 3px 0;
    background: #f9fafc;
    margin-bottom: 10px;
  }
  .logInfo {
    max-height: 150px;
    overflow-y: auto;
  }
  .infoItem {
    margin-bottom: 10px;
    padding: 0 3px;
    color: red;
  }
}
.upload {
  width: 100%;
  height: 80px;
  background: #f8fafb;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #e9e9e9;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  color: #999999;
}
:deep(.el-upload) {
  width: 100%;
}
</style>
